<template>
  <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-row type="flex" align="center">
      <el-form-item label="学科">
        <el-select @click.native="getSubject" v-model="ruleForm.subjectID" placeholder="请选择" style="width: 220px">
          <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级目录">
        <el-select @click.native="getCatalog" v-model="ruleForm.catalogID" placeholder="请选择" style="width: 220px">
          <el-option v-for="item in label" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签">
        <el-select v-model="ruleForm.label" placeholder="请选择" style="width: 220px">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model="ruleForm.keyword" placeholder="根据题干搜索" style="width: 220px"></el-input>
      </el-form-item>
    </el-row>
    <el-row type="flex" align="center">
      <el-form-item label="试题类型">
        <el-select @click.native="getType" v-model="ruleForm.questionType" placeholder="请选择" style="width: 220px">
          <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度">
        <el-select @click.native="getdifficulty" v-model="ruleForm.difficulty" placeholder="请选择" style="width: 220px">
          <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向">
        <el-select @click.native="getdirection" v-model="ruleForm.direction" placeholder="请选择" style="width: 220px">
          <el-option v-for="item in direction" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入人">
        <el-select v-model="ruleForm.people" placeholder="请选择" style="width: 220px">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-row>
    <el-row type="flex" align="center">
      <el-form-item label="题目备注">
        <el-input v-model="ruleForm.remark" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="企业简称">
        <el-input v-model="ruleForm.companyName" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="城市">
        <el-select @click.native="getprovinces" v-model="ruleForm.province" placeholder="请选择" style="width: 110px">
          <el-option v-for="item in provinces" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-select @click.native="getcitys" v-model="ruleForm.city" placeholder="请选择" style="width: 110px">
          <el-option v-for="item in citys" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item width="220px">
        <el-row type="flex" justify="end" align="center">
            <el-button @click="clear">清空</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
        </el-row>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import { mapActions, mapState } from 'vuex'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
export default {
  data () {
    return {
      type: [],
      difficulty: [],
      direction: [],
      provinces: [],
      citys: [],
      people: ['超级管理员', '管理员'],
      ruleForm: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        label: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 题型
        difficulty: '', // 难度
        direction: '', // 方向
        people: '', // 录入人
        remark: '', // 备注
        companyName: '', // 企业简称
        province: '', // 城市
        city: '' // 城区
      }
    }
  },
  computed: {
    ...mapState('question', ['list', 'label'])
  },
  methods: {
    ...mapActions('question', ['getList', 'getlabel']),
    // 获取学科
    getSubject () {
      this.getList()
    },
    // 获取目录
    getCatalog () {
      this.getlabel(this.ruleForm.subjectID)
    },
    // 获取类型
    getType () {
      this.type = questionType
    },
    // 获取难度
    getdifficulty () {
      this.difficulty = difficulty
    },
    // 获取方向
    getdirection () {
      this.direction = direction
    },
    // 获取城市
    getprovinces () {
      this.provinces = provinces()
    },
    // 获取城区
    getcitys () {
      this.citys = citys(this.ruleForm.province)
    },
    // 搜索
    search () {
      // console.log(this.$route)
      if (this.$route.name === 'questions-list') {
        this.$emit('search', this.ruleForm.subjectID, this.ruleForm.keyword)
      }
      if (this.$route.name === 'questions-choice') {
        this.$emit('choice', this.ruleForm.keyword, this.ruleForm.subjectID)
      }
    },
    // 清空
    clear () {
      this.ruleForm = {
        subjectID: '', // 学科
        catalogID: '', // 目录
        label: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 题型
        difficulty: '', // 难度
        direction: '', // 方向
        people: '', // 录入人
        remark: '', // 备注
        companyName: '', // 企业简称
        province: '', // 城市
        city: '' // 城区
      }
    }
  }
}
</script>

<style>
</style>
